<template>
  <div class="xinxiAdd">

    <el-header class="renhead">
      <el-row>
        <el-col :span="12">档案信息</el-col>
        <el-col :span="12">
          <el-button @click="add()" type="primary">提交</el-button>
        </el-col>
      </el-row>
    </el-header>



    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">基本信息</span>
        <el-row>
          <el-col :span="3">编号</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.profileNumber"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">档案姓名</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.name"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">状态</el-col>
          <el-col :span="17">
            <el-select style="width:100%" v-model="userdata.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">部门</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.departmentId"></el-input>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="3">参加工作时间</el-col>
          <el-col :span="17">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                style="width:100%"
                v-model="userdata.startJobTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">加入本单位时间</el-col>
          <el-col :span="17">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                style="width:100%"
                v-model="userdata.joinUsTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">合同开始时间</el-col>
          <el-col :span="17">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                style="width:100%"
                v-model="userdata.contractStartTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">合同结束时间</el-col>
          <el-col :span="17">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                style="width:100%"
                v-model="userdata.contractEndTime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">出生年月</el-col>
          <el-col :span="17">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker style="width:100%" v-model="userdata.birthDate" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">性别</el-col>



            <el-col :span="17">
              <el-select style="width:100%" v-model="userdata.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>


        </el-row>
        <el-row>
          <el-col :span="3">学历</el-col>

            <el-col :span="17">
              <el-select style="width:100%" v-model="userdata.education" placeholder="请选择">
                <el-option
                  v-for="item in educations"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>

        </el-row>
        <el-row>
          <el-col :span="3">婚姻状况</el-col>
          <el-col :span="17">
            <el-select style="width:100%" v-model="userdata.maritalStatus" placeholder="请选择">
              <el-option
                v-for="item in maritalStatuss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">政治面貌</el-col>
          <el-col :span="17">
            <el-select style="width:100%" v-model="userdata.politicalStatus" placeholder="请选择">
              <el-option
                v-for="item in politicalStatuss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">岗位</el-col>
          <el-col :span="17">
            <el-select style="width:100%" v-model="userdata.position" placeholder="请选择">
              <el-option
                v-for="item in positions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="详细信息">
        <el-row>
          <el-col :span="3">民族</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.nation"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">身份证号</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.identityNumber"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">籍贯</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.originPlace"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">专业</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.major"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">毕业院校</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.graduateFrom"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">职称</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.positionalTitles"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">家庭住址</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.homeAddress"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">家庭电话</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.homeTelephone"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">电子邮件</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.email"></el-input>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="其他信息">
        <el-row>
          <el-col :span="3">奖罚情况</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.achievements"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">培训情况</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.trainingSituation"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">教育背景</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.educationalBackground"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">工作简历</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.jobResume"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">社会关系</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.socialRelationship"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">备注</el-col>
          <el-col :span="17">
            <el-input></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">其他</el-col>
          <el-col :span="17">
            <el-input v-model="userdata.remark"></el-input>
          </el-col>
        </el-row>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import addapi from "@/api/renshi/renshidangan";
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: true,
          label: "在职"
        },
        {
          value: false,
          label: "离职"
        }
      ],

      sexs: [
        {
          value: 1,
          label: "男"
        },
        {
          value: 0,
          label: "女"
        }
      ],

      educations: [
        {
          value: 0,
          label: "大专"
        },
        {
          value: 1,
          label: "本科"
        }
      ],

      maritalStatuss: [
        {
          value: 0,
          label: "已婚"
        },
        {
          value: 1,
          label: "未婚"
        }
      ],

      politicalStatuss: [
        {
          value: 0,
          label: "群众"
        },
        {
          value: 1,
          label: "党员"
        }
      ],


      positions: [
        {
          value: 1,
          label: "岗位1"
        },
        {
          value: 0,
          label: "岗位2"
        }
      ],

      userdata: {
        achievements: "",
        birthDate: "",
        contractEndTime: "",
        contractStartTime: "",
        createdTime: "",
        deleted: true,
        departmentId: 0,
        departmentName: "",
        education: 0,
        educationalBackground: "",
        email: "",
        graduateFrom: "",
        homeAddress: "",
        homeTelephone: "",
        identityNumber: "",
        isDeleted: true,
        jobResume: "",
        joinUsTime: "",
        major: "",
        maritalStatus: 0,
        name: "",
        nation: "",
        originPlace: "",
        other: "",
        politicalStatus: 0,
        position: "",
        positionalTitles: "",
        profileId: 0,
        profileNumber: "",
        remark: "",
        sex: 0,
        socialRelationship: "",
        startJobTime: "",
        status: true,
        trainingSituation: "",
        updatedTime: ""
      },

    };
  },
  created() {},
  methods: {
    add() {
      addapi.renShiadd(this.userdata).then(res => {
        this.$message.success("添加成功");
      });
    }
  }
};
</script>

<style scoped lang="scss">
.xinxiAdd .el-tabs {
  margin: 0;
  width: 100%;
}
.xinxiAdd {
  padding-left: 5%;
  padding-right: 5%;
}
.xinxiAdd .el-row {
  margin: 10px;
  font-size: 13px;
}

.xinxiAdd .el-row .el-col:nth-child(1) {
  margin-top: 7px;
}
.renhead {
  background-color: rgb(250, 251, 252);
  margin: 0;
  height: 12px;
  border-bottom: 1px solid rgba(180, 180, 180, 0.603);
}
.renhead .el-row {
  padding: 11px;
}
.renhead .el-row .el-col:nth-child(1) {
  padding-top: 7px;
}
.renhead .el-row .el-col:nth-child(2) {
  text-align: right;
}
</style>
